<template>
  <div id="document" v-if="loadState" :style="containerStyle" @dblclick="loadFile">
    <img class="open_file" title="打开" src="~@/assets/img/SlideEditor/document_icon.png" draggable="false"
         @click="loadFile"
    />
  </div>
  <img v-else class="loading" src="~@/assets/img/SlideEditor/Navigation/loading.gif" draggable="false">
</template>
<script>
  import {mapActions} from 'vuex'
  import path from 'path'
  import action from '../../common/typeActions'

  let remote = ''


  export default {
    name: 'Document',
    props: {
      ID: {type: String},
      FilePath: {type: String},
      containerStyle: {type: Object},
      isReadonly: {type: Boolean, default: false}
    },
    data: function () {
      return {
        loadState: true,
        files: []
      }
    },
    methods: {
      ...mapActions({
        addExternalFile: action.SLIDEEDITOR.AddExternalFile,
        addDocument: action.SLIDEEDITOR.AddDocument
      }),
      // 上传图片
      loadFile: function () {
        let self = this
        if (self.isReadonly) return
        if (remote) {
          let extensions = {
            properties: ['openFile', 'showHiddenFiles'],
            filters: [{name: 'Document', extensions: ['pdf', 'doc', 'docx']}]
          }
          remote.dialog.showOpenDialog(remote.getCurrentWindow(), extensions, async rs => {
            try {
              if (!rs) return
              self.loadState = false
              let fileInfo = await this.addExternalFile({
                id: self.ID,
                path: rs[0]
              })
              if (!fileInfo) throw new Error('获取文件转化结果异常')
              let arr = []
              fileInfo.Files.forEach(img => {
                arr.push({fileID: fileInfo.ID, imageID: img.ID})
              })

              self.addDocument({id: self.ID, image: arr})
              self.loadState = true
            } catch (error) {
              self.$alert(error.message, '提示', {type: 'warning'})
            }
          })
        } else {
          let input = document.createElement('input')
          input.type = 'file'
          input.multiple = false
          input.accept = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,application/pdf'
          input.onchange = async () => {
            if (event.target.files.length > 0) {
              this.loadState = false
              if (!/docx?|pdf/i.test(path.extname(event.target.files[0].name))) return this.$message('请选择PDF、DOC、DOCX格式的文档文件')
              let formData = new FormData()
              formData.append('dbPath', this.$store.state.appearCourt.casePath)
              for (let i = 0; i < event.target.files.length; i++) {
                formData.append('files', event.target.files[i])
              }
              let uploadFiles = await this.$api.post.uploadFiles(formData)

              this.addDocument({id: this.ID, image: uploadFiles[0]})
              // await this.addExternalFile({
              //   id: this.ID,
              //   fileID: this.FileCode,
              //   imageID: this.FilePath,
              //   file: uploadFiles[0]
              // })

              // this.$emit('ImageLoadFinish', {ID: this.ID})
              this.loadState = true
            }
          }
          input.click()

          // this.openFileDialog(extensions, async () => {
          //   if (event.target.files.length > 0) {
          //     if (!/docx?|pdf/i.test(path.extname(event.target.files[0].name))) return this.$message('请选择PDF、DOC、DOCX格式的文档文件')
          //
          //     try {
          //       this.loadState = false
          //
          //       /* eslint-disable new-cap */
          //       let uploadFileBySlice = new this.$methods.uploadFileBySlice({
          //         file: event.target.files[0],
          //         fileType: 'caseAccessory'
          //       })
          //
          //       uploadFileBySlice.eventBus.on('success', async data => {
          //         let fileInfo = await this.addExternalFile({
          //           id: this.ID,
          //           path: { Files: [data] }
          //         })
          //         if (!fileInfo) throw new Error('获取文件转化结果异常')
          //         let arr = []
          //         fileInfo.Files.forEach(img => {
          //           arr.push({ fileID: fileInfo.ID, imageID: img.ID })
          //         })
          //
          //         this.addDocument({ id: this.ID, image: arr })
          //         this.loadState = true
          //       })
          //       uploadFileBySlice.eventBus.on('fail', err => {
          //         this.$alert(err.message, '错误', { type: 'error' })
          //         this.loadState = true
          //       })
          //       this.loadState = false
          //       uploadFileBySlice.start()
          //     } catch (error) {
          //       this.$alert(error.message, '提示')
          //     }
          //   }
          // })
        }
      }
    }
  }
</script>
<style>
  #document {
    width: 100%;
    height: 100%;
  }

  #document .document_file {
    width: 100%;
    height: 100%;
    float: left;
  }

  #document .open_file {
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    cursor: pointer;
  }

  .loading {
    width: 100%;
    height: 100%;
  }
</style>
